// src/stores/models/theme.js
import { defineStore } from 'pinia'
import { ref, onMounted } from 'vue'

export const useThemeStore = defineStore('template-theme', () => {
  const isDarkTheme = ref(false)

  const toggleTheme = () => {
    isDarkTheme.value = !isDarkTheme.value
    updateTheme();
  }

  const updateTheme = () => {
    if (isDarkTheme.value) {
      document.body.setAttribute('arco-theme', 'dark')
      localStorage.setItem('template-theme', 'dark');
    } else {
      document.body.removeAttribute('arco-theme')
      localStorage.setItem('template-theme', 'light');
    }
  }

  onMounted(() => {
    // 尝试从 localStorage 获取用户的主题偏好
    const savedTheme = localStorage.getItem('template-theme');
    if (savedTheme) {
      isDarkTheme.value = savedTheme === 'dark';
    } else {
      isDarkTheme.value = false; // 默认设置为日间模式
    }

    // 更新主题
    updateTheme();
  })

  return { isDarkTheme, toggleTheme }
})
